<template>
  <!--模板-->
  <hr>
  子组件：<br><br> 
  <el-button type="" @click="change">修改 person</el-button><br><br>
  <el-button type="" @click="change10">修改 state10</el-button><br> 
  <el-button type="" @click="change11">修改 state11</el-button><br> 
  <el-button type="" @click="change12">修改 state12</el-button><br> 
  <el-button type="" @click="change13">修改 state13</el-button><br> 
  <el-button type="" @click="change14">修改 state14</el-button><br> 
  <el-button type="" @click="change20">修改 state20</el-button><br> 
  <el-button type="" @click="state21.addAge(8)">修改 state21</el-button><br><br>
  person：{{ person }}<br>
  state10：{{ state10 }}<br>
  state11：{{ state11 }}<br>
  state12：{{ state12 }}<br>
  state13：{{ state13 }}<br>
  state14：{{ state14 }}<br>
  state20：{{ state20 }}<br>
  state21：{{ state21 }}<br>
  <hr>

</template>
 

<script setup lang="ts">
  import { useStoreLocal } from '../../../lib/main'

  // 引入状态
  import usePerson from './state-person'

  // 引入测试状态
  const state10 = useStoreLocal('state10')
  const state11 = useStoreLocal('state11')
  const state12 = useStoreLocal('state12')
  const state13 = useStoreLocal('state13')
  const state14 = useStoreLocal('state14')
  const state20 = useStoreLocal('state20')
  const state21 = useStoreLocal('state21')

   
  const person = usePerson()
  console.log('person', person)

  const change = () => {
    person.age += 1
  }

  const change10 = () => {
    state10.age += 1
  }
  const change11 = () => {
    state11.age += 1
  }
  const change12 = () => {
    state12[0].age += 1
  }
  const change13 = () => {
    state13.age += 1
  }
  const change14 = () => {
    state14[0].age += 1
  }
  const change20 = () => {
    state20.addAge(2)
  }

  console.log('state10', state10)
  console.log('state11', state11)
  console.log('state12', state12)
  console.log('state13', state13)
  console.log('state14', state14)
  console.log('state20', state20)
  console.log('state21', state21)


</script>